<template>
  <ArmyPanelLayout class="myFramePanelLayout" title="">
    <div class="barracksCenterOne">
      <div class="barracksCenterOne--list"  v-if="showCameraArr.length">
        <div class="barracksCenterOne--list__item">
          <!--<img src="@/assets/images/armyScreen/sample1.png"/>-->
          <H5VideoPlayer v-if="showCameraArr[0]" :camera="showCameraArr[0]"></H5VideoPlayer>
        </div>
        <div class="barracksCenterOne--list__item">
          <!--<img src="@/assets/images/armyScreen/sample1.png"/>-->
          <H5VideoPlayer v-if="showCameraArr[1] && flag" :camera="showCameraArr[1]"></H5VideoPlayer>
        </div>
      </div>
      <el-button @click="nextVideoGroup" v-show="false">下一个 {{context}}</el-button>
    </div>
  </ArmyPanelLayout>
</template>

<script setup>
import ArmyPanelLayout from '@/views/armyScreen/comp/ArmyPanelLayout.vue'
import {queryAllCamera, getVideoPlayInfo, queryVideoLoopPeriod} from '@/api/armyScreenApi.js'
import H5VideoPlayer from "@/components/h5player/H5VideoPlayer.vue";

/*********************** 视频播放轮训时间 ***********************/
let loopTime = 30
function queryVideoLoopPeriodService () {
  return queryVideoLoopPeriod()
}

/*********************** 生命周期 ***********************/
// const context = import.meta.env.VITE_APP_CONTEXT
let timer = null
onMounted(async () => {
  const {data} = await queryVideoLoopPeriodService()
  loopTime = data
  // await getVideoPlayInfoService()
  await queryAllCameraService()

  timer = setInterval(() => {
    nextVideoGroup()
  }, loopTime * 1000) // 1 分钟轮播
})

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer)
  }
})

/*********************** 视频播放 ***********************/
let jijianConfig = null // 极简播放器的平台配置信息
async function getVideoPlayInfoService() {
  return new Promise(function (resolve, reject) {
    getVideoPlayInfo().then(res => {
      jijianConfig = res.data || null
      resolve()
    })
  })
}


/*********************** 摄像头模块 ***********************/
/**
 * 摄像头数组, 用于缓存
 */
let cameraArr = []
/**
 * 显示的摄像头
 * @type {Ref<UnwrapRef<*[]>>}
 */
const showCameraArr = ref([])
let showGroup = -1 // 默认显示的位置
/**
 * 获取 摄像头 列表
 */
async function queryAllCameraService() {
  return new Promise((resolve, reject) => {
    queryAllCamera().then(res => {
      const data = res.data
      if (data && data.length > 0) {
        cameraArr = [...data, ...data] // 扩大两倍，这样就不用考虑单数，后面计算的问题
        nextVideoGroup() // 开始播放
      } else {
        cameraArr.value = data || []
      }
      resolve()
    })
  })
}

const flag = ref(false)
/**
 * 显示下一组视频
 */
function nextVideoGroup() {
  showCameraArr.value = []
  nextTick(() => {
    setTimeout(() => {
      showGroup++
      if ((showGroup * 2) > cameraArr.length) {
        showGroup = 0
      }
      const group = cameraArr.slice(showGroup * 2, showGroup * 2 + 2)
      if (jijianConfig) {
        group.forEach(item => {
          item.language = jijianConfig.language
          item.platIp = jijianConfig.platIp
          item.platePort = jijianConfig.platePort
          item.strToken = jijianConfig.strToken
          item.protocol = jijianConfig.protocol
          item.imultiRouteId = jijianConfig.imultiRouteId
        })
      }
      showCameraArr.value = group
      flag.value = false
      nextTick(() =>{
        setTimeout(()=>{
          flag.value = true
        }, 750)
      })
    }, 200)
  })
}
</script>

<style lang="scss" scoped>
.myFramePanelLayout {
  width: 880px;
  padding-top: 0;
}

.barracksCenterOne {
  width: 880px;
  height: 312px;

  &--list {
    display: flex;
    justify-content: space-around;
    padding: 16px 0;

    &__item {
      width: 426px;
      height: 280px;

      img {
        width: 100%;
        height: auto;
      }
    }
  }
}
</style>
